<template>
	<view class="beijingse">
		<!-- 普通购买弹框 -->
		<view>
			<u-popup :show="ptshow" @close="ptclose" mode="center" :round="10">
				<view>
					<view class="mainpadding">
						<view class="textcenter bigtext">温馨提示</view>
						<view class="ershui textcenter margin_top7">此购买方式参与平台返利活动<br>请按需购买切勿非理性消费</view>
					</view>
					<view class="flexbetween margin_top7">
						<view class="quxiaobtn" @click="ptshow = false">取消</view>
						<view class="renzbtn" @click="tzqrdd">继续支付</view>
					</view>
				</view>
			</u-popup>
		</view>
		<!-- 返利购买弹框 -->
		<view>
			<u-popup :show="flshow" @close="flclose" mode="center" :round="10">
				<view>
					<view class="mainpadding">
						<view class="textcenter bigtext">温馨提示</view>
						<view class="ershui textcenter margin_top7">此购买方式不参与平台返利活动，<br>平台正常按购买数量发货。</view>
					</view>
					<view class="flexbetween margin_top7">
						<view class="quxiaobtn" @click="flshow = false">取消</view>
						<view class="renzbtn" @click="tzqrdd">继续支付</view>
					</view>
				</view>
			</u-popup>
		</view>
		<!-- 产品参数弹框 -->
		<view>
			<u-popup :show="cpshow" @close="cpclose" mode="bottom" :round="10">
				<view class="mainpadding">
					<view class="textcenter sanstext">产品参数</view>
					<view class="xiahuax flexleft margin_top">
						<view class="qianhtext kuandu">品牌</view>
						<view class="ershib">阿玛尼</view>
					</view>
					<view class="xiahuax flexleft margin_top">
						<view class="qianhtext kuandu">材质</view>
						<view class="ershib">普通玻璃</view>
					</view>
					<view class="xiahuax flexleft margin_top">
						<view class="qianhtext kuandu">容量</view>
						<view class="ershib">201ml-300ml</view>
					</view>
					<view class="xiahuax flexleft margin_top">
						<view class="qianhtext kuandu">产地</view>
						<view class="ershib">中国</view>
					</view>
					<view class="xiahuax flexleft margin_top">
						<view class="qianhtext kuandu">颜色分类</view>
						<view class="ershib">蓝色</view>
					</view>
					<view class="xiahuax flexleft margin_top">
						<view class="qianhtext kuandu">注册号</view>
						<view class="ershib">202245645646</view>
					</view>
					<view class="xiahuax flexleft margin_top">
						<view class="qianhtext kuandu">功效</view>
						<view class="ershib">补水 保湿 温润</view>
					</view>
					<view class="xiahuax flexleft margin_top">
						<view class="qianhtext kuandu">保质期</view>
						<view class="ershib">六个月</view>
					</view>
					<view class="xiahuax flexleft margin_top">
						<view class="qianhtext kuandu">保质期</view>
						<view class="ershib">六个月</view>
					</view>
					<view class="xiahuax flexleft margin_top">
						<view class="qianhtext kuandu">责任企业</view>
						<view class="ershib">河南省郑州市金水区云开路236号</view>
					</view>
					<view class="xiahuax flexleft margin_top">
						<view class="qianhtext kuandu">注册人</view>
						<view class="ershib">阿玛尼化妆品有限公司</view>
					</view>
					<view class="margin_top bigbtn">完成</view>
				</view>
			</u-popup>
		</view>
		<!-- 服务 -->
		<view>
			<u-popup :show="fwshow" @close="fwclose" mode="bottom" :round="10">
				<view class="mainpadding">
					<view class="textcenter sanstext">服务</view>
					<view class="xiahuax margin_top">
						<view class="bigbtext">7天无理由退货</view>
						<view class="qianhtext margin_top2">满足7天无理由退换货申请的前提下，包邮商品需要买家承担退货邮费，非包邮商品需要买家承担发货和退货邮费。</view>
					</view>
					<view class="xiahuax margin_top">
						<view class="bigbtext">破损包退</view>
						<view class="qianhtext margin_top2">签收72小时内，发现商品破损或商品破损导致漏液/变形等并提供有效凭证的，商家24小时内响应并换货，诚信用户享极速换货。
						</view>
					</view>
					<view class="xiahuax margin_top">
						<view class="bigbtext">退货运费险</view>
						<view class="qianhtext margin_top2">卖家投保退货运费险，负担一定金额退货运费(保单生效以下单显示为准)</view>
					</view>
					<view class="xiahuax margin_top">
						<view class="bigbtext">过敏包退</view>
						<view class="qianhtext margin_top2">
							签收60天内，使用商品过敏并提供有效凭证的，商家48小时内响应并换货。为便于商家完成理赔，订单信息将同步至保险公司，请知悉。</view>
					</view>
					<view class="margin_top bigbtn">完成</view>
				</view>
			</u-popup>
		</view>
		<!-- 规格 -->
		<view>
			<u-popup :show="ggshow" @close="ggclose" mode="bottom" :round="10">
				<view class="mainpadding">
					<view class="flexbottom1">
						<view class="guigslt margin_right2">
							<image src="../../static/image/system/fsxb.png" mode=""></image>
						</view>
						<view class="">
							<view class="flexleft">
								<view class="dahtext margin_right1">¥98.00</view>
								<view class="huisetextjx">￥266.00</view>
							</view>
							<view class="margin_top2 erslhuang">库存：32</view>
						</view>
					</view>
					<view class="margin_top6">
						<view class="titletext">选择规格</view>
						<view class="flexleft flex_wrap">
							<view class="margin_top margin_right2 huangg">规格二</view>
							<view class="margin_top margin_right2 huigg">规格二</view>
						</view>
						<view class="titletext margin_top">净含量</view>
						<view class="flexleft flex_wrap">
							<view class="margin_top margin_right2 huangg">300ml</view>
							<view class="margin_top margin_right2 huigg">300ml</view>
						</view>
						<view class="flexbetween margin_top">
							<view class="titletext ">购买数量</view>
							<view class="jiajian">
								<view class="jianhao">
									<view class="line"></view>
								</view>
								<view class="xhtext">11</view>
								<view class="jiahao"></view>
							</view>
						</view>
					</view>
					<view class="margin_top bigbtn">确定</view>
				</view>
			</u-popup>
		</view>
		<!-- 轮播图 -->
		<view class="u-demo-block">
			<u-swiper :list="list6" @change="e => currentNum = e.current" :autoplay="false" indicatorStyle="right: 20px"
				height="375" imgMode="aspectFit " indicator indicatorMode="line">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
				</view>
			</u-swiper>
		</view>
		<!-- 内容 -->
		<view class="neirong">
			<view class="mainpadding">
				<view class="mainpadding ffffff radius">
					<view class="flexbetween">
						<view class="flexleft">
							<view class="margin_right3 qianshu">￥266.00</view>
							<view class="huisetextjx">￥266.00</view>
						</view>
						<view class="huisetext">销量10W+</view>
					</view>
					<view class="notitletext margin_top">WATERCOME-一模敢裸一夏天 让肌肤畅享无负担 悦享女王专属美肤礼</view>
				</view>
				<view class="ffffff mainpadding margin_top">
					<view class="flexbetween" @click="dkggtk">
						<view class="flexleft">
							<view class="huiesb margin_right3">规格</view>
							<view class="heiesb">请选择规格</view>
						</view>
						<view class="righticon"></view>
					</view>
					<view class="flexbetween margin_top" @click="dkfwtk">
						<view class="flexleft">
							<view class="huiesb margin_right3">服务</view>
							<view class="heiesb">七天无理由退换 · 假一赔十 · 包邮</view>
						</view>
						<view class="righticon"></view>
					</view>
					<view class="flexbetween margin_top" @click="dkcpcs">
						<view class="flexleft">
							<view class="huiesb margin_right3">参数</view>
							<view class="heiesb">品牌 重量...</view>
						</view>
						<view class="righticon"></view>
					</view>
				</view>
				<view class="ffffff mainpadding radius margin_top">
					<view class="flexbetween">
						<view class="flexleft">
							<view class="dianslt margin_right2">
								<image src="../../static/image/system/fsxb.png" mode=""></image>
							</view>
							<view class="">
								<view class="titletext">阿玛尼官方旗舰店</view>
								<view class="flexleft margin_top1">
									<view class="herse margin_right3">描述:4.8</view>
									<view class="herse margin_right3">服务:4.8</view>
									<view class="herse margin_right3">物流:4.8</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 商品详情和商品评价 -->
			<view class="ffffff mainpadding margin_top">
				<view class="flexcenter ffffff">
					<u-tabs :list="list1" lineColor="#FAB536" @click="clicktabtow" :activeStyle="{
					    color: '#333333',
					    fontWeight: 'bold',
					    transform: 'scale(1.05)'
					}" :inactiveStyle="{
					            color: '#999999',
								 fontWeight: 'bold',
					            transform: 'scale(1)'
					        }" itemStyle="padding-left: 35px; padding-right: 35px; height: 44px;"></u-tabs>
				</view>
				<view class="" v-if="currenttabtow == 0">
					<image src="../../static/image/system/tg.png" mode=""></image>
				</view>
				<view class="" v-if="currenttabtow == 1">
					<view class="xiahuax margin_top" v-for="item in 2">
						<view class="flexbetween">
							<view class="flexleft">
								<view class="pjslt margin_right2">
									<image src="../../static/image/system/fsxb.png" mode=""></image>
								</view>
								<view class="">
									<view class="bigbtext">岁岁有年年</view>
									<view class="flexleft margin_top1">
										<view class="wujiaox margin_right1" v-for="item in 4"></view>
									</view>
								</view>
							</view>
							<view class="ershui">2022.12.31</view>
						</view>
						<view class="margin_top2" style="margin-left: 93rpx;">
							<view class="ershui">
								这个沙发的质量挺不错的，亚麻的面料，摸起来既不咯手又不褪色，这个价位能有这个质量，真的是良心商家啊
							</view>
							<view class="flexleft">
								<view class="mjplt margin_right1" v-for="item in 4">
									<image src="../../static/image/system/fsxb.png" mode=""></image>
								</view>
							</view>
							<view class="margin_top huibox mainpadding">
								<view class="ershui">亲，感谢您对我们的认可，我们会再接再厉的</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 固定底部 -->
		<view class="gudingdb ffffff">
			<view class="flexbetween">
				<view class="flexleft">
					<view class="margin_right2">
						<view class="dianpu"></view>
						<view class="heierse margin_top1">店铺</view>
					</view>
					<!-- <view class="margin_right2">
						<view class="gouwuc"></view>
						<view class="heierse">加入购物车</view>
					</view> -->
				</view>
				<!-- <view class="shuangpinbtn">
					<view class="flexleft">
						<view class="" style="margin-right: 94rpx;" @click="ptgmtk">
							<view class="huigongtext textcenter">￥188.8</view>
							<view class="xiaohhtext">直接普通购买</view>
						</view>
						<view class="" @click="flgmtk">
							<view class="bigbaitext textcenter">￥188.8</view>
							<view class="xiaobtext">全额返利购买</view>
						</view>
					</view>
				</view> -->
				<!-- 立即兑换 -->
				<view class="ljduih">立即兑换</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ptshow: false,
				flshow: false,
				cpshow: false, //产品参数
				fwshow: false, //服务
				ggshow: false, //规格
				currenttabtow: 0,
				list1: [{
						name: '商品详情',
					},
					{
						name: '商品评价',
					}
				],
				list6: [
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				]
			}
		},
		methods: {
			// 跳转确认订单
			tzqrdd() {
				uni.navigateTo({
					url: '/pages/homepage/querendingdan'
				})
			},
			// 规格
			ggclose() {
				this.ggshow = false
				// console.log('close');
			},
			dkggtk() {
				this.ggshow = true
			},
			// 服务弹框
			fwclose() {
				this.fwshow = false
				// console.log('close');
			},
			dkfwtk() {
				this.fwshow = true
			},
			// 产品参数弹框
			cpclose() {
				this.cpshow = false
				// console.log('close');
			},
			dkcpcs() {
				this.cpshow = true
			},
			// 返利购买弹框
			flclose() {
				this.flshow = false
				// console.log('close');
			},
			flgmtk() {
				this.flshow = true
			},
			// 普通购买弹框
			ptclose() {
				this.ptshow = false
				// console.log('close');
			},
			ptgmtk() {
				this.ptshow = true
			},
			clicktabtow(e) {
				console.log(e);
				// this.status = e.index;
				this.currenttabtow = e.index;
				// this.getdata();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.jiahao {
		background-size: 100% 100%;
		width: 21rpx;
		height: 19rpx;
		position: absolute;
		top: 14rpx;
		right: 12rpx;
		background-image: url('../../static/image/system/jiaohao.png');
	}

	.jianhao {
		width: 22rpx;
		position: absolute;
		left: 13rpx;
		// height: 3.5rpx;
		top: 20rpx;
		height: 20rpx;

		.line {
			height: 3.5rpx;
			width: 22rpx;
			background-color: #999999;
		}
	}

	.xhtext {
		font-size: 31rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FAB536;
	}

	.jiajian {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 164rpx;
		height: 46rpx;
		position: relative;
		border-radius: 20rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/jiajian.png');
	}

	.huangg {
		width: 147rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FAB536;
		height: 53rpx;
		background: rgba(250, 181, 54, 0.1);
		border-radius: 27rpx;
		border: 2rpx solid #FAB536;
	}

	.huigg {
		width: 147rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		height: 53rpx;
		background: #F5F5F5;
		;
		border-radius: 27rpx;
		border: 2rpx solid #F5F5F5;
		;
	}

	.erslhuang {
		font-size: 26rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FAB536;
	}

	.dahtext {
		font-size: 36rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FAB536;
	}

	.guigslt {
		width: 134rpx;
		height: 134rpx;
		border-radius: 8rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 8rpx;
		}
	}

	.kuandu {
		width: 30%;
	}

	.ershib {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.qianhtext {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.sanstext {
		font-size: 34rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.renzbtn {
		width: 291.5rpx;
		height: 74rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		border-top: 1rpx solid #E7E7E7;
		// border-right:1rpx solid #E7E7E7;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		border-radius: 0 0 20rpx 0;
		color: #FAB536;
	}

	.quxiaobtn {
		border-radius: 0 0 0 20rpx;
		width: 291.5rpx;
		height: 74rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		border-top: 1rpx solid #E7E7E7;
		border-right: 1rpx solid #E7E7E7;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.neirong {
		padding-bottom: 250rpx;
	}

	.ljduih {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		width: 286rpx;
		height: 93rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/ljdh.png');
	}

	.gouwuc {
		margin: auto;
		width: 45rpx;
		height: 45rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/gouwc.png');
	}

	.heierse {
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.dianpu {
		margin: auto;
		width: 35rpx;
		height: 32rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/dianpu.png');
	}

	.huibox {
		background: #EEEEEE;
		border-radius: 8rpx;
	}

	.mjplt {
		width: 140rpx;
		height: 140rpx;
		border-radius: 18rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 18rpx;
		}
	}

	.ershui {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.wujiaox {
		width: 27rpx;
		height: 27rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/wjx.png');
	}

	.xiahuax {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #F1F1F1;
	}

	.pjslt {
		width: 73rpx;
		height: 73rpx;
		border-radius: 50%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.herse {
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.dianslt {
		width: 80rpx;
		height: 80rpx;
		border-radius: 8rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.heiesb {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.huiesb {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.huisetext {
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.huisetextjx {
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		text-decoration: line-through;
	}

	.qianshu {
		font-size: 48rpx;
		font-family: DIN-Bold, DIN;
		font-weight: bold;
		color: #FAB536;
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}
</style>
